<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<style>
    .car {
        width: 500px;
        height: 300px;
        background-color: #f5f5f5;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-around;
        margin: 0 auto;
        position: relative;
    }

    .car span {
        width: 300px;
        height: 40px;
        border: 1px solid skyblue;
        display: inline;
    }

    .car span a {
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 40px;
        color: #333;
        /* 去掉默认样式 */
        text-decoration: none;
    }

    .car span a:hover {
        background-color: skyblue;
        color: #fff;
    }

    .content {
        width: 100%;
        height: 300px;
        background-color: bisque;
        position: absolute;
        top: 40px;

    }
</style>

<body>
    <div id="app">
        <!-- 选项卡 -->
        <div class="car">
            <span @click="tabs1"><a href="#">Tab 1</a></span>
            <span @click="tabs2"><a href="#">Tab 2</a></span>
            <span @click="tabs3"><a href="#">Tab 3</a></span>
            <div class="content" v-show="tabs[0].active">{{ tabs[0].name }}</div>
            <div class="content" v-show="tabs[1].active">{{ tabs[1].name }}</div>
            <div class="content" v-show="tabs[2].active">{{ tabs[2].name }}</div>
        </div>


    </div>
    <!-- <script src="../vue.global.js"></script> -->

</body>

</html>